<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>订单详情 - <%= orderNumber %></title>
		<style>
						* {
							margin: 0;
							padding: 0;
							box-sizing: border-box;
						}

						body {
							font-family: 'Microsoft YaHei', Arial, sans-serif;
							background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
							min-height: 100vh;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 10px;
							/* transform: scale(0.85); */
							transform-origin: center center;
						}

						.container {
							background: white;
							border-radius: 15px;
							box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
							width: 100%;
							max-width: 700px;
							overflow: hidden;
						}

						.header {
							background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
							color: white;
							padding: 30px;
							text-align: center;
						}

						.header h1 {
							font-size: 24px;
							margin-bottom: 8px;
							font-weight: 300;
						}

						.header p {
							font-size: 14px;
							opacity: 0.9;
						}

						.content {
							padding: 20px;
						}

						/* 统一的卡片样式 */
						.info-card {
							background: #e3f2fd;
							border: 1px solid #e0e0e0;
							border-left: 4px solid #6c5ce7;
							border-radius: 8px;
							padding: 15px;
							margin-bottom: 15px;
						}

						.info-card h3 {
							color: #333;
							margin-bottom: 10px;
							font-size: 16px;
							font-weight: 500;
						}

						.detail-item {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 6px 0;
							border-bottom: 1px solid #f0f0f0;
							font-size: 14px;
						}

						.detail-item:last-child {
							border-bottom: none;
						}

						.detail-label {
							font-weight: 500;
							color: #666;
							min-width: 80px;
							font-size: 14px;
						}

						.detail-value {
							color: #333;
							font-weight: 500;
							font-size: 14px;
						}

						/* 状态徽章 */
						.status-badge {
							display: inline-block;
							padding: 4px 10px;
							border-radius: 15px;
							font-size: 12px;
							font-weight: 500;
							text-align: center;
						}

						.status-waiting {
							background: #fff3cd;
							color: #856404;
							border: 1px solid #ffeaa7;
						}

						.status-progress {
							background: #d4edda;
							color: #155724;
							border: 1px solid #c3e6cb;
						}

						.status-expired {
							background: #f8d7da;
							color: #721c24;
							border: 1px solid #f5c6cb;
						}

						.status-completed {
							background: #d1ecf1;
							color: #0c5460;
							border: 1px solid #bee5eb;
						}

						/* 系统选择按钮 */
						.system-selection {
							text-align: center;
							margin: 15px 0;
						}

						.system-btn {
							background: #6c5ce7;
							color: white;
							border: none;
							padding: 10px 25px;
							margin: 0 8px;
							border-radius: 20px;
							font-size: 14px;
							cursor: pointer;
							transition: all 0.3s ease;
							text-decoration: none;
							display: inline-block;
						}

						.system-btn:hover {
							background: #5a4fcf;
							transform: translateY(-2px);
							box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
						}

						.system-btn:disabled {
							background: #ccc;
							cursor: not-allowed;
							transform: none;
							box-shadow: none;
						}

						/* 选择的登录方式显示 */
						.selected-method {
							background: #e8f5e8;
							border: 1px solid #c3e6cb;
							border-radius: 4px;
							padding: 6px 10px;
							margin: 8px 0;
							text-align: center;
						}

						.selected-method-display {
							display: flex;
							align-items: center;
							justify-content: center;
							gap: 6px;
							font-size: 14px;
							font-weight: 500;
							color: #155724;
						}

						.selected-indicator {
							color: #28a745;
							font-size: 14px;
							font-weight: bold;
						}

						/* 进度条 */
						.progress-container {
							margin: 15px 0;
						}

						.progress-bar {
							width: 100%;
							height: 6px;
							background: #f0f0f0;
							border-radius: 3px;
							overflow: hidden;
						}

						.progress-fill {
							height: 100%;
							background: linear-gradient(90deg, #6c5ce7, #a29bfe);
							border-radius: 3px;
							transition: width 0.3s ease;
						}

						.progress-text {
							text-align: center;
							margin-top: 8px;
							color: #666;
							font-size: 12px;
						}

						.progress-detail {
							margin-top: 6px;
							text-align: center;
							color: #999;
							font-size: 12px;
						}
							font-size: 14px;
							color: #666;
							text-align: center;
						}

						/* 二维码容器 */
						.qr-container {
							background: #e3f2fd;
							border: 1px solid #e0e0e0;
							/* border-left: 4px solid #6c5ce7; */
							border-radius: 8px;
							padding: 20px;
							text-align: center;
							margin: 20px 0;
						}

						.qr-code {
							margin: 20px 0;
						}

						.qr-code img {
							max-width: 200px;
							height: auto;
							border: 2px solid #ddd;
							border-radius: 8px;
						}

						/* 加载动画 */
						.loading {
							text-align: center;
							color: #666;
							font-size: 16px;
							padding: 40px;
						}

						.loading-spinner {
							width: 40px;
							height: 40px;
							border: 4px solid #f3f3f3;
							border-top: 4px solid #856404;
							border-radius: 50%;
							animation: spin 1s linear infinite;
							display: inline-block;
						}

						@keyframes spin {
							to {
								transform: rotate(360deg);
							}
						}

						/* 截图展示 */
						.screenshots-container {
							display: grid;
							grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
							gap: 15px;
							margin-top: 15px;
						}

						.screenshot-item {
							text-align: center;
							background: #f8f9fa;
							border: 1px solid #e9ecef;
							border-radius: 8px;
							padding: 10px;
							transition: transform 0.2s ease, box-shadow 0.2s ease;
						}

						.screenshot-item:hover {
							transform: translateY(-2px);
							box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
						}

						.screenshot-item img {
							width: 100%;
							height: 120px;
							object-fit: cover;
							border-radius: 4px;
							box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
							cursor: pointer;
							transition: opacity 0.2s ease;
						}

						.screenshot-item img:hover {
							opacity: 0.8;
						}

						.screenshot-info {
							margin-top: 8px;
							font-size: 12px;
							color: #666;
						}

						.screenshot-type {
							font-weight: bold;
							color: #007bff;
						}

						.screenshot-info p {
							margin: 8px 0;
							color: #333;
							font-size: 14px;
						}

						.screenshot-time {
							margin-top: 4px;
							font-size: 11px;
							color: #999;
						}

						/* 图片查看模态框 */
						.modal {
							display: none;
							position: fixed;
							z-index: 1000;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0.8);
						}

						.modal-content {
							position: relative;
							margin: auto;
							padding: 20px;
							width: 90%;
							max-width: 800px;
							top: 50%;
							transform: translateY(-50%);
							text-align: center;
						}

						.modal-image {
							max-width: 100%;
							max-height: 80vh;
							border-radius: 8px;
						}

						.close {
							position: absolute;
							top: 15px;
							right: 35px;
							color: #fff;
							font-size: 40px;
							font-weight: bold;
							cursor: pointer;
						}

						.close:hover {
							color: #ccc;
						}

						/* 警告图标 */
						.warning-icon {
							font-size: 48px;
							color: #ff6b6b;
							margin-bottom: 20px;
						}

						/* 刷新按钮 */
						.refresh-btn {
							background: #00b894;
							color: white;
							border: none;
							padding: 10px 20px;
							border-radius: 20px;
							font-size: 14px;
							cursor: pointer;
							margin-top: 15px;
							transition: all 0.3s ease;
						}

						.refresh-btn:hover {
							background: #00a085;
							transform: translateY(-1px);
						}
						.qr-image-placeholder{
							display: flex;
			    			flex-direction: column;
						}

						/* 响应式设计 */
						@media (max-width: 768px) {
							.container {
								margin: 10px;
								border-radius: 10px;
							}

							.header {
								padding: 20px;
							}

							.header h1 {
								font-size: 24px;
							}

							.content {
								padding: 20px;
							}

							.system-btn {
								display: block;
								margin: 10px 0;
								width: 100%;
							}
						}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- <div class="header">
				<h1>订单详情</h1>
				<p>订单号：<%= orderNumber %></p>
			</div> -->

			<div class="content">
				<!-- 订单基本信息 -->
				<div class="info-card">
					<h3>订单信息</h3>
					<div class="detail-item">
						<span class="detail-label">订单号：</span>
						<span class="detail-value"><%= orderNumber %></span>
					</div>
					<div class="detail-item">
						<span class="detail-label">状态：</span>
						<span class="detail-value">
							<span
								class="status-badge status-<%= order.status === '待扫码' ? 'waiting' : order.status === '进行中' ? 'progress' : order.status === '登录失效' ? 'expired' : 'completed' %>"
							>
								<%= order.status %>
							</span>
						</span>
					</div>
					<% if (order.systemType) { %>
					<div class="detail-item">
						<span class="detail-label">系统类型：</span>
						<span class="detail-value"><%= order.systemType %></span>
					</div>
					<% } %>
				</div>

				<!-- 根据订单状态显示不同内容 -->
				<% if (order.status === '待扫码') { %>
				<!-- 待扫码状态：显示系统选择和二维码区域 -->
				<div class="info-card">
					<!-- <h3>选择登录方式</h3> -->
					<div class="system-selection" id="systemSelection">
						<button onclick="getQQQR()" class="system-btn" id="qqBtn">QQ登录</button>
						<button onclick="getWechatQR()" class="system-btn" id="wechatBtn">微信登录</button>
					</div>

					<!-- 当前选择的登录方式显示 -->
					<div id="selectedMethod" class="selected-method" style="display: none">
						<div class="selected-method-display">
							<span id="selectedMethodText"></span>
							<span class="selected-indicator">✓</span>
						</div>
					</div>

					<!-- QQ二维码展示区域 -->
					<div id="qqCodeArea" class="qr-code-area" style="display: none">
						<h4>QQ登录二维码</h4>
						<div class="qr-container">
							<div id="qqCodeImage" class="qr-image-placeholder">
								<div class="loading-spinner">正在生成二维码...</div>
							</div>
						</div>
					</div>

					<!-- 微信二维码展示区域 -->
					<div id="wechatCodeArea" class="qr-code-area" style="display: none">
						<h4>微信登录二维码</h4>
						<div class="qr-container">
							<div id="wechatCodeImage" class="qr-image-placeholder">
								<div class="loading-spinner">正在生成二维码...</div>
							</div>
							<div id="screenshotUpdateTime" style="font-size: 12px; color: #666; text-align: center; margin-top: 5px"></div>
						</div>
					</div>
				</div>
				<% } else if (order.status === '进行中') { %>
				<!-- 进行中状态：显示进度 -->
				<!-- 进度已移至下方统一显示 -->
				<% } else if (order.status === '登录失效') { %>
				<!-- 登录失效状态：显示警告和重新登录选项 -->
				<div class="info-card">
					<div class="warning-icon">⚠️</div>
					<h3>登录已失效</h3>
					<p style="text-align: center; color: #666; margin: 15px 0">您的登录状态已失效，请重新选择登录方式</p>
					<div class="system-selection">
						<button onclick="getQQQR()" class="system-btn">重新QQ登录</button>
						<button onclick="getWechatQR()" class="system-btn">重新微信登录</button>
					</div>
				</div>
				<% } %>

				<!-- 登录信息显示（已登录状态） -->
				<% if (order.type && order.deviceLoginTime) { %>
				<div class="info-card">
					<h3>登录信息</h3>
					<div class="detail-item">
						<span class="detail-label">登录方式：</span>
						<span class="detail-value"><%= order.type %></span>
					</div>
					<div class="detail-item">
						<span class="detail-label">登录时间：</span>
						<span class="detail-value"><%= new Date(order.deviceLoginTime).toLocaleString('zh-CN') %></span>
					</div>
				</div>
				<% } %>

				<!-- 执行进度（单独模块） -->
				<% if (order.status !== '待扫码') { %>
				<div class="info-card">
					<h3>执行进度</h3>
					<% var progressPercent = 0; if (order.completedPoints && order.totalPoints && order.totalPoints > 0) { progressPercent = (order.completedPoints / order.totalPoints *
					100).toFixed(1); } %>
					<div class="progress-container">
						<div class="progress-bar">
							<div class="progress-fill" id="progressFill"></div>
						</div>
						<div class="progress-text">进度：<%= progressPercent %>%</div>
						<div class="progress-detail">已完成 <%= order.completedPoints || 0 %> / <%= order.totalPoints || 0 %> 积分</div>
					</div>
					<% if (order.status === '进行中') { %>
					<button class="refresh-btn" onclick="location.reload()">刷新状态</button>
					<% } %>
				</div>
				<% } %>

				<!-- 执行截图（所有状态都显示） -->
				<% if (order.status !== '待扫码') { %>
				<div class="info-card">
					<h3>执行截图</h3>
					<% if (order.screenshots && order.screenshots.length > 0) { %>
					<div class="screenshots-container">
						<% order.screenshots.forEach(function(screenshot, index) { %>
						<div class="screenshot-item">
							<img src="<%= screenshot.base64 || screenshot.filePath %>" alt="<%= screenshot.type || '截图' %>" loading="lazy" onclick="openModal('<%= screenshot.base64 || screenshot.filePath %>')" />
							<div class="screenshot-info">
								<% if (screenshot.description) { %>
								<p><%= screenshot.description %></p>
								<% } %>
								<div class="screenshot-time">上传时间: <%= new Date(screenshot.uploadTime).toLocaleString('zh-CN') %></div>
							</div>
						</div>
						<% }); %>
					</div>
					<% } else { %>
					<div>
						<p>暂无截图</p>
						<p>订单执行过程中的截图将显示在这里</p>
					</div>
					<% } %>
				</div>
				<% } %>
			</div>
		</div>

		<!-- 图片查看模态框 -->
		<div id="imageModal" class="modal">
			<span class="close" onclick="closeModal()">&times;</span>
			<div class="modal-content">
				<img id="modalImage" class="modal-image" />
			</div>
		</div>

		<script>
			function closeModal() {
				document.getElementById('imageModal').style.display = 'none';
			}

			// 点击模态框背景关闭
			window.onclick = function (event) {
				const modal = document.getElementById('imageModal');
				if (event.target === modal) {
					closeModal();
				}
			};

			// 登录相关功能
			let qqLoginPollingInterval = null;
			let wechatLoginPollingInterval = null;
			let isLoginMethodSelected = false; // 标记是否已选择登录方式

			// 获取QQ二维码函数
			async function getQQQR() {
				if (isLoginMethodSelected) {
					return; // 已选择登录方式，不允许重新选择
				}

				console.log('开始获取QQ二维码...');
				isLoginMethodSelected = true;

				// 禁用所有登录按钮并隐藏按钮区域
				document.getElementById('qqBtn').disabled = true;
				document.getElementById('wechatBtn').disabled = true;
				document.getElementById('systemSelection').style.display = 'none';

				// 显示选择的方法
				const selectedMethod = document.getElementById('selectedMethod');
				const selectedMethodText = document.getElementById('selectedMethodText');
				const qqCodeArea = document.getElementById('qqCodeArea');
				const wechatCodeArea = document.getElementById('wechatCodeArea');
				const qqCodeImage = document.getElementById('qqCodeImage');

				// 隐藏微信登录区域，显示QQ登录区域
				wechatCodeArea.style.display = 'none';
				qqCodeArea.style.display = 'block';

				// 显示QQ登录选择
				selectedMethodText.textContent = 'QQ登录';
				selectedMethod.style.display = 'block';

				// 显示加载状态
				qqCodeImage.innerHTML = '<div class="loading-spinner"></div><div>正在生成二维码...</div>';

				try {
					// 调用QQ二维码接口
					const response = await fetch(`/order-detail/api/qq-qrcode/<%= orderNumber %>`);
					const data = await response.json();
					console.log('QQ二维码响应:', data);

					if (data.success && data.qrCode) {
						qqCodeImage.innerHTML = `<img src="${data.qrCode}" alt="QQ登录二维码" style="max-width: 100%; height: auto; border-radius: 8px; cursor: pointer;" onclick="openModal('${data.qrCode}', 'QQ登录二维码')">`;
						qqCodeImage.innerHTML += `
                            <div style="text-align: center; margin-top: 10px; color: #ff0000; font-weight: bold;">
                                <p>代练过程中请不要顶号!!!</p>
                                <p>扫码授权后,请返回本网页</p>
                                <p>【截图】保存至相册</p>
                                <p>使用【登录游戏的QQ】扫码授权登录</p>
                            </div>
                        `;

						// 开始轮询QQ登录状态
						startQQLoginPolling();
					} else {
						console.error('获取QQ二维码失败:', data.message);
						qqCodeImage.innerHTML = `<div style="color: #ff6b6b;">获取二维码失败: ${data.message || '请刷新重试'}</div>`;
					}
				} catch (error) {
					console.error('获取QQ二维码失败:', error);
					qqCodeImage.innerHTML = '<div style="color: #ff6b6b;">网络错误，请重试</div>';
				}
			}

			// 获取微信二维码函数
			async function getWechatQR() {
				if (isLoginMethodSelected) {
					return; // 已选择登录方式，不允许重新选择
				}

				console.log('开始获取微信二维码...');
				isLoginMethodSelected = true;

				// 禁用所有登录按钮并隐藏按钮区域
				document.getElementById('qqBtn').disabled = true;
				document.getElementById('wechatBtn').disabled = true;
				document.getElementById('systemSelection').style.display = 'none';

				// 显示选择的方法
				const selectedMethod = document.getElementById('selectedMethod');
				const selectedMethodText = document.getElementById('selectedMethodText');
				const qqCodeArea = document.getElementById('qqCodeArea');
				const wechatCodeArea = document.getElementById('wechatCodeArea');
				const wechatCodeImage = document.getElementById('wechatCodeImage');

				// 隐藏QQ登录区域，显示微信登录区域
				qqCodeArea.style.display = 'none';
				wechatCodeArea.style.display = 'block';

				// 显示微信登录选择
				selectedMethodText.textContent = '微信登录';
				selectedMethod.style.display = 'block';

				// 显示加载状态
				wechatCodeImage.innerHTML = '<div class="loading-spinner">正在生成二维码...</div>';

				try {
					// 先下发微信登录任务
					const taskResponse = await fetch(`/order-detail/wechat-qr/<%= orderNumber %>`, {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json',
						},
					});

					const taskData = await taskResponse.json();
					console.log('微信登录任务响应:', taskData);

					if (taskData.success) {
						console.log('微信登录任务已下发，设备:', taskData.deviceName);
						wechatCodeImage.innerHTML = '<div class="loading-spinner"></div><div>正在等待设备生成微信登录截图...</div>';

						// 开始轮询微信登录状态
						startWechatLoginPolling();
					} else {
						console.error('微信登录任务下发失败:', taskData.message);
						wechatCodeImage.innerHTML = `<div style="color: #ff6b6b;">任务下发失败: ${taskData.message}</div>`;
					}
				} catch (error) {
					console.error('获取微信二维码失败:', error);
					wechatCodeImage.innerHTML = '<div style="color: #ff6b6b;">网络错误，请重试</div>';
				}
			}

			// 开始QQ登录状态轮询
			function startQQLoginPolling() {
				// 清除旧的轮询
				if (qqLoginPollingInterval) {
					clearInterval(qqLoginPollingInterval);
				}

				// 立即执行一次
				pollQQLoginStatus();

				// 每1秒轮询一次QQ登录状态
				qqLoginPollingInterval = setInterval(pollQQLoginStatus, 1000);
			}

			function stopQQLoginPolling() {
				if (qqLoginPollingInterval) {
					clearInterval(qqLoginPollingInterval);
					qqLoginPollingInterval = null;
				}
			}

			// 开始微信登录状态轮询
			function startWechatLoginPolling() {
				// 清除旧的轮询
				if (wechatLoginPollingInterval) {
					clearInterval(wechatLoginPollingInterval);
				}

				// 立即执行一次
				pollWechatLoginStatus();

				// 每2秒轮询一次微信登录状态
				wechatLoginPollingInterval = setInterval(pollWechatLoginStatus, 2000);
			}

			function stopWechatLoginPolling() {
				if (wechatLoginPollingInterval) {
					clearInterval(wechatLoginPollingInterval);
					wechatLoginPollingInterval = null;
				}
			}

			// QQ登录状态轮询
			function pollQQLoginStatus() {
				fetch(`/order-detail/api/qq-login-status/<%= orderNumber %>`)
					.then((response) => response.json())
					.then((data) => {
						console.log('QQ登录状态检查返回:', data);

						// 处理新的API响应格式
						if (data.success === true) {
							if (data.status === 'success') {
								// 登录成功
								console.log('检测到登录成功，清理定时器并显示成功状态');
								stopQQLoginPolling();
								showQQLoginSuccess(data);
								return;
							} else if (data.status === 'waiting') {
								// 等待扫码状态，继续检查
								console.log('等待扫码中...');
							}
						} else if (data.success === false) {
							// 处理错误情况
							if (data.message === '二维码信息不存在') {
								console.log('二维码信息不存在，停止检查');
								stopQQLoginPolling();
								showQQExpiredMessage();
								return;
							}
						}

						// 检查后端返回的原始响应，判断状态码（兼容旧格式）
						if (data.rawResponse) {
							const responseText = data.rawResponse;
							console.log('原始响应文本:', responseText);

							// 解析状态码：ptuiCB('状态码','0','','0','消息', '')
							const statusMatch = responseText.match(/ptuiCB\('(\d+)'/);
							if (statusMatch) {
								const statusCode = statusMatch[1];
								console.log('解析到的状态码:', statusCode);

								if (statusCode === '66') {
									// 二维码未失效，保持正常显示
									console.log('二维码未失效，保持正常显示');
								} else if (statusCode === '67') {
									// 二维码认证中
									console.log('二维码认证中，显示等待确认状态');
									showQQAuthenticatingStatus();
								} else if (statusCode === '68') {
									// 登录被拒绝/取消
									console.log('检测到登录被拒绝，显示取消状态');
									stopQQLoginPolling();
									showQQLoginCancelled();
									return;
								} else if (statusCode === '0') {
									// 登录成功
									console.log('检测到登录成功，清理定时器并显示成功状态');
									stopQQLoginPolling();
									showQQLoginSuccess(data);
									return;
								} else if (statusCode === '65') {
									// 二维码已失效
									stopQQLoginPolling();
									showQQExpiredMessage();
									return;
								}
							}
						}
					})
					.catch((error) => {
						console.error('QQ登录状态检查失败:', error);
					});
			}

			// 微信登录状态轮询
			function pollWechatLoginStatus() {
				fetch(`/order-detail/api/wechat-login-status/<%= orderNumber %>`)
					.then((response) => response.json())
					.then((data) => {
						console.log('微信登录状态检查返回:', data);
						if (data.success) {
							const loginData = data.data;

							// 处理微信截图显示
							if (loginData.hasScreenshot && loginData.screenshot) {
								const wechatCodeImage = document.getElementById('wechatCodeImage');
								if (wechatCodeImage) {
									const currentContent = wechatCodeImage.innerHTML;
									if (currentContent.includes('正在等待') || currentContent.includes('loading')) {
										wechatCodeImage.innerHTML = `<img src="${loginData.screenshot}" alt="微信登录截图" style="max-width: 100%; height: auto; border-radius: 8px;">`;
									} else {
										wechatCodeImage.innerHTML = `<img src="${loginData.screenshot}" alt="微信登录截图" style="max-width: 100%; height: auto; border-radius: 8px;">`;
									}
									wechatCodeImage.innerHTML += `
										<div style="text-align: center; margin-top: 10px; color: #ff0000; font-weight: bold;">
											<p>代练过程中请不要顶号!!!</p>
											<p>扫码授权后,请返回本网页</p>
											<p>微信区需要【两个手机】扫码</p>
											<p>将二维码显示在【另一台手机】</p>
											<p>使用【登录游戏的微信】扫码授权登录</p>
										</div>
										<img src="" width="100%" height="100%" />
									`;
								}

								// 如果有更新时间，显示更新时间
								if (loginData.screenshotUpdateTime) {
									const updateTimeElement = document.getElementById('screenshotUpdateTime');
									if (updateTimeElement) {
										updateTimeElement.textContent = `更新时间: ${new Date(loginData.screenshotUpdateTime).toLocaleString('zh-CN')}`;
									}
								}
							} else {
								// 如果没有截图数据，保持等待状态显示
								const wechatCodeImage = document.getElementById('wechatCodeImage');
								if (wechatCodeImage && !wechatCodeImage.innerHTML.includes('正在等待')) {
									wechatCodeImage.innerHTML = '<div class="loading-spinner">正在等待设备生成微信登录截图...</div>';
								}
							}

							// 处理设备登录状态 - 使用正确的字段名
							const status = loginData.deviceStatus;
							const message = loginData.deviceMessage;

							console.log('设备登录状态:', status, message);

							if (status === '登录成功') {
								console.log('设备登录成功，调用成功接口');
								stopWechatLoginPolling();
								handleWechatLoginSuccess();
							} else if (status === '登录失败' || status === '登录超时') {
								console.log('设备登录失败或超时:', message);
								stopWechatLoginPolling();
								showWechatLoginError(message);
							}
						}
					})
					.catch((error) => {
						console.error('微信登录状态检查失败:', error);
					});
			}

			// 处理微信登录成功
			async function handleWechatLoginSuccess() {
				console.log('开始处理微信登录成功...');

				try {
					// 调用微信登录成功接口
					const response = await fetch(`/order-detail/api/wechat-login-success/<%= orderNumber %>`, {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json',
						},
						body: JSON.stringify({
							type: '微信',
							deviceLoginTime: new Date().toISOString(),
						}),
					});

					const result = await response.json();
					console.log('微信登录成功接口响应:', result);

					if (result.success) {
						console.log('订单状态更新成功');
						showWechatLoginSuccess();
					} else {
						console.error('订单状态更新失败:', result.message);
						showWechatLoginSuccess(true);
					}
				} catch (error) {
					console.error('调用微信登录成功接口失败:', error);
					showWechatLoginSuccess(true);
				}
			}

			// 显示QQ认证中状态
			function showQQAuthenticatingStatus() {
				const qqCodeImage = document.getElementById('qqCodeImage');
				if (qqCodeImage) {
					qqCodeImage.innerHTML =
						'<div style="background: linear-gradient(135deg, #e7f3ff 0%, #cce7ff 100%); border-radius: 12px; text-align: center; padding: 30px; margin: 20px 0; box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);">' +
						'<div style="font-size: 24px; margin-bottom: 15px;">✅</div>' +
						'<div style="font-size: 18px; font-weight: 600; color: #0066cc; margin-bottom: 10px;">已扫码</div>' +
						'<div style="font-size: 14px; color: #0066cc;">请在手机QQ上确认登录</div>' +
						'<div style="font-size: 12px; color: #666; margin-top: 10px;">等待您的确认...</div>' +
						'</div>';
				}
			}

			// 显示QQ登录成功
			async function showQQLoginSuccess(data) {
				const qqCodeImage = document.getElementById('qqCodeImage');
				if (qqCodeImage) {
					qqCodeImage.innerHTML =
						'<div style="background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%); border-radius: 12px; text-align: center; padding: 30px; margin: 20px 0; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);">' +
						'<div style="font-size: 24px; margin-bottom: 15px;">🎉</div>' +
						'<div style="font-size: 18px; font-weight: 600; color: #2e7d32; margin-bottom: 10px;">QQ登录成功！</div>' +
						'<div style="font-size: 14px; color: #388e3c; margin-bottom: 15px;">登录验证完成</div>' +
						'<div id="qqCountdown" style="font-size: 14px; color: #2e7d32; font-weight: 500;">2秒后自动跳转到订单详情页面...</div>' +
						'</div>';
				}

				// 更新订单信息
				try {
					const response = await fetch(`/order-detail/api/qq-login-success/<%= orderNumber %>`, {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json',
						},
						body: JSON.stringify({
							type: 'QQ',
							deviceLoginTime: new Date().toISOString(),
						}),
					});

					const result = await response.json();
					console.log('QQ登录成功接口响应:', result);
				} catch (error) {
					console.error('调用QQ登录成功接口失败:', error);
				}

				// 倒计时跳转
				let countdown = 2;
				const countdownElement = document.getElementById('qqCountdown');
				const countdownInterval = setInterval(() => {
					countdown--;
					if (countdownElement) {
						countdownElement.textContent = `${countdown}秒后自动跳转到订单详情页面...`;
					}
					if (countdown <= 0) {
						clearInterval(countdownInterval);
						setTimeout(() => {
							location.reload();
						}, 500);
					}
				}, 1000);
			}

			// 显示微信登录成功
			function showWechatLoginSuccess(hasError = false) {
				const wechatCodeImage = document.getElementById('wechatCodeImage');
				if (wechatCodeImage) {
					const errorNote = hasError ? '<div style="font-size: 12px; color: #ff9800; margin-top: 10px;">注意：状态更新可能失败，请手动刷新页面</div>' : '';

					wechatCodeImage.innerHTML =
						'<div style="background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%); border-radius: 12px; text-align: center; padding: 30px; margin: 20px 0; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);">' +
						'<div style="font-size: 24px; margin-bottom: 15px;">🎉</div>' +
						'<div style="font-size: 18px; font-weight: 600; color: #2e7d32; margin-bottom: 10px;">微信登录成功！</div>' +
						'<div style="font-size: 14px; color: #388e3c; margin-bottom: 15px;">登录验证完成</div>' +
						'<div id="wechatCountdown" style="font-size: 14px; color: #2e7d32; font-weight: 500;">2秒后自动跳转到订单详情页面...</div>' +
						errorNote +
						'</div>';
				}

				// 倒计时跳转
				let countdown = 2;
				const countdownElement = document.getElementById('wechatCountdown');
				const countdownInterval = setInterval(() => {
					countdown--;
					if (countdownElement) {
						countdownElement.textContent = `${countdown}秒后自动跳转到订单详情页面...`;
					}
					if (countdown <= 0) {
						clearInterval(countdownInterval);
						setTimeout(() => {
							location.reload();
						}, 500);
					}
				}, 1000);
			}

			// 显示QQ二维码过期
			function showQQExpiredMessage() {
				const qqCodeImage = document.getElementById('qqCodeImage');
				if (qqCodeImage) {
					qqCodeImage.innerHTML =
						'<div style="color: #ff6b6b; text-align: center; padding: 20px;">' +
						'<div style="font-size: 18px; margin-bottom: 10px;">⏰ 二维码已过期</div>' +
						'<div style="font-size: 14px; color: #666;">请刷新页面重新获取二维码</div>' +
						'</div>';
				}
			}

			// 显示QQ登录取消
			function showQQLoginCancelled() {
				const qqCodeImage = document.getElementById('qqCodeImage');
				if (qqCodeImage) {
					qqCodeImage.innerHTML =
						'<div style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); border-radius: 12px; text-align: center; padding: 30px; margin: 20px 0; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);">' +
						'<div style="font-size: 24px; margin-bottom: 15px;">❌</div>' +
						'<div style="font-size: 18px; font-weight: 600; color: #d63031; margin-bottom: 10px;">登录已取消</div>' +
						'<div style="font-size: 14px; color: #636e72;">用户拒绝了本次登录请求</div>' +
						'<div style="font-size: 12px; color: #636e72; margin-top: 10px;">请刷新页面重新扫码登录</div>' +
						'</div>';
				}
			}

			// 显示微信登录错误
			function showWechatLoginError(message) {
				const wechatCodeImage = document.getElementById('wechatCodeImage');
				if (wechatCodeImage) {
					wechatCodeImage.innerHTML =
						'<div style="background: linear-gradient(135deg, #ffcdd2 0%, #f8bbd9 100%); border-radius: 12px; text-align: center; padding: 30px; margin: 20px 0; box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);">' +
						'<div style="font-size: 24px; margin-bottom: 15px;">❌</div>' +
						'<div style="font-size: 18px; font-weight: 600; color: #c62828; margin-bottom: 10px;">微信登录失败</div>' +
						'<div style="font-size: 14px; color: #d32f2f; margin-bottom: 15px;">' +
						(message || '登录验证失败，请重试') +
						'</div>' +
						'<button onclick="location.reload()" style="background: #f44336; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px;">重新尝试</button>' +
						'</div>';
				}
			}

			// 图片查看模态框功能
			function openModal(imageSrc, imageAlt) {
				const modal = document.getElementById('imageModal');
				const modalImage = document.getElementById('modalImage');
				modalImage.src = imageSrc;
				modalImage.alt = imageAlt;
				modal.style.display = 'block';
			}

			// 页面卸载时清理轮询
			window.addEventListener('beforeunload', function () {
				stopQQLoginPolling();
				stopWechatLoginPolling();
			});

			// 设置进度条宽度
			document.addEventListener('DOMContentLoaded', function () {
				const progressFill = document.getElementById('progressFill');
				if (progressFill) {
					progressFill.style.width = '<%= progressPercent %>%';
				}
			});
		</script>
	</body>
</html>
